<template>
	<el-card>
		<el-row justify="space-between">
			<div>
				<el-button type="primary" @click="save()">暂存</el-button>
				<el-button type="primary" @click="submit()">提交</el-button>
			</div>
			<div v-if="dataForm.id !== null">
				<el-tooltip class="item" effect="dark" content="点击文章id查看文章信息" placement="top">
					<el-button @click="state.drawer = true">{{ dataForm.id }}</el-button>
				</el-tooltip>
			</div>
		</el-row>

		<div style="height: 10px"></div>

		<el-row>
			<el-col :span="24"> <div id="vditor" /></el-col>
		</el-row>
	</el-card>

	<el-drawer v-model="state.drawer" title="文章信息" direction="rtl">
		<!-- <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="40px" @keyup.enter="submitHandle()"> -->
		<el-form ref="dataFormRef" :model="dataForm" label-width="40px">
			<el-form-item label="标题" prop="title">
				<el-input v-model="dataForm.title" placeholder="标题" type="textarea" autosize></el-input>
			</el-form-item>
			<!-- <el-form-item label="分类" prop="categoryId">
				<el-input v-model="dataForm.categoryId" placeholder="分类"></el-input>
			</el-form-item> -->
			<el-form-item prop="categoryName" label="分类" class="category-list">
				<el-popover
					ref="categoryListPopover"
					v-model:visible="categoryListVisible"
					placement="bottom-start"
					trigger="click"
					:width="400"
					popper-class="popover-pop"
				>
					<template #reference>
						<el-input v-model="dataForm.categoryName" :readonly="true" placeholder="分类" @click="categoryListVisible = true">
							<template #suffix>
								<svg-icon v-if="dataForm.categoryId !== 0" icon="icon-close-circle" @click.stop="treeSetDefaultHandle()"></svg-icon>
							</template>
						</el-input>
					</template>
					<div class="popover-pop-body">
						<el-tree
							ref="categoryListTree"
							:data="categoryList"
							:props="{ label: 'name', children: 'children' }"
							node-key="id"
							:highlight-current="true"
							:expand-on-click-node="false"
							accordion
							@current-change="treeCurrentChange"
						>
						</el-tree>
					</div>
					<el-row justify="end">
						<el-button type="primary" link style="margin-right: 15px" @click="categoryListVisible = false">关闭</el-button>
					</el-row>
				</el-popover>
			</el-form-item>
			<el-form-item prop="tagIds" label="标签">
				<el-select v-model="dataForm.tagIds" multiple placeholder="标签" style="width: 100%">
					<el-option v-for="tag in tagList" :key="tag.id" :label="tag.name" :value="tag.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="封面" prop="cover">
				<el-input v-model="dataForm.cover" placeholder="封面"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="state.drawer = false">取消</el-button>
			<el-button type="primary" @click="submitHandle()">提交</el-button>
		</template>
	</el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import Vditor from 'vditor'
import 'vditor/dist/index.css'
import { useArticleApi, useArticleSubmitApi } from '@/api/site/article'
import { ElMessage } from 'element-plus/es'
import { useRouter } from 'vue-router'
import { useCategoryListApi, useCategoryApi } from '@/api/site/category'
import { useTagListApi } from '@/api/site/tag'
import { log } from 'console'

const dataFormRef = ref()
const categoryList = ref([])
const tagList = ref([])

const categoryListVisible = ref(false)
const categoryListTree = ref()

const state = reactive({
	drawer: false
})

const dataForm = reactive({
	id: null,
	title: null,
	content: '',
	categoryId: 0,
	categoryName: '',
	tagIds: null,
	up: 0,
	down: 0,
	like: 0,
	collect: 0,
	comment: 0,
	cover: null,
	status: 0
})

const vditor = ref<Vditor | null>(null)

onMounted(() => {
	console.log('onMounted')

	// 初始化vditor编辑器
	vditor.value = new Vditor('vditor', {
		value: dataForm.content,
		minHeight: 725,
		width: '100%',
		placeholder: '从这开始你的表演......',
		// sv分屏预览, ir即时渲染, wysiwyg所见即所得
		mode: 'ir',
		after: () => {},
		input: () => {
			dataForm.content = vditor.value!.getValue()
		}
	})

	// 路由传参
	const router = useRouter()
	const id = router.currentRoute?.value?.query?.id
	if (id!!) {
		useArticleApi(Number(id)).then(res => {
			Object.assign(dataForm, res.data)
			vditor.value?.setValue(res.data.content)

			//
			getCate(res.data.categoryId)
		})
	}

	// 分类列表
	getCategoryList()
	// 获取标签列表
	getTagList()
})

// 获取分类列表
const getCategoryList = () => {
	return useCategoryListApi().then(res => {
		categoryList.value = res.data
	})
}
// 获取标签列表
const getTagList = () => {
	return useTagListApi().then(res => {
		console.log(res)

		tagList.value = res.data
	})
}

// 获取信息
const getCate = (id: number) => {
	console.log('getCate', id)
	useCategoryApi(id).then(res => {
		console.log('useCategoryApi', res)
		dataForm.categoryName = res.data.name

		if (dataForm.categoryId === 0) {
			return treeSetDefaultHandle()
		}

		categoryListTree.value.setCurrentKey(res.data.categoryId)
	})
}

// 上级分类树, 设置默认值
const treeSetDefaultHandle = () => {
	dataForm.categoryId = 0
	dataForm.categoryName = '顶级分类'
}

const treeCurrentChange = (data: any) => {
	dataForm.categoryId = data.id
	dataForm.categoryName = data.name
	categoryListVisible.value = false
}

// 暂存
const save = () => {
	console.log('save')
	dataForm.status = 0
	useArticleSubmitApi(dataForm).then(res => {
		const id = res.data

		ElMessage.success({
			message: '暂存成功！',
			duration: 1000,
			onClose: () => {
				state.drawer = false
				// emit('refreshDataList')
			}
		})
		useArticleApi(id).then(res => {
			Object.assign(dataForm, res.data)
		})
	})
}

// 提交
const submit = () => {
	console.log('submit')
	state.drawer = true
}

// 文章提交处理
const submitHandle = () => {
	console.log('submitHandle')
	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}

		dataForm.status = 1
		useArticleSubmitApi(dataForm).then(res => {
			ElMessage.success({
				message: '提交成功！',
				duration: 1000,
				onClose: () => {
					state.drawer = false
					// emit('refreshDataList')
				}
			})

			const id = res.data
			useArticleApi(id).then(res => {
				Object.assign(dataForm, res.data)
			})
		})
	})
}
</script>

<style></style>
